<template>
	<div class="index-home">
		<header style="border-bottom: 1px solid #e6e6e6">
                试验类型
	        <el-select @change="changeType" v-model="testType" placeholder="请选择"  clearable style="width: 200px;margin:10px 0% 10px 30px;">
	            <el-option
	                    label="预试验"
	                    value="0">
	            </el-option>
	            <el-option
	                    label="正式试验"
	                    value="1">
	            </el-option>
	            <el-option
	                    label="预试验+正式试验"
	                    value="">
	            </el-option>
	        </el-select>
	    </header>
		<p style="margin:20px 0px 20px 0px">孕前期</p>
		<div class="div-echarts">
			<div class="sys-echart" >
				<echarts :options="chartsInfo1"  chartId="infoChartx1" ></echarts>
			</div>
		</div>
		<p>怀孕期</p>
		<div class="div-echarts">
			<div class="sys-echart" >
				<echarts :options="chartsInfoX" chartId="infoCharty2"></echarts>
			</div>
		</div>
		<p>儿童期</p>
		<div class="div-echarts">
			<div class="sys-echart" >
				<echarts :options="chartsInfoY" chartId="infoChartz3"></echarts>
			</div>
		</div>

	</div>
</template>
<script>
import echarts from "../home/echartsLog.vue"   //
import {mapGetters} from 'vuex'
export default{
	components: {
		echarts
	},
	computed: {
		...mapGetters([
			'token',
			'RoleGroup'
		]),
	},
	data(){
		return {
			loading:true,
			tableData:[],
			pageId:1,
			total:null,
			activeName:null,
			testType:'',
			loading:false,
			optionDiq:[],
			pageSize:10,
			FatherNotInCount:'',
			chartsInfo1:{    //社区
				color:['#41BDBD'],
				tooltip : {
					trigger: 'item',
					formatter: function(e){
						return '人数:'+e.value+ '<br>'+'风险因素:'+e.name 
					}
				},
				legend: {
				},
				xAxis: {
					type: 'category',
					name:'风险因素',
					nameLocation: 'end',
					position:'bottom',
					nameGap:'30',
					data: [],

				},
				grid: {
					left: '3%',
					right: '8%',
					bottom: '10%',
					containLabel: true
				},
				yAxis: {
					type: 'value',
					name:'人数',
				},
				series: [{
					data: [],
					barWidth :39,
					type: 'bar'
				}]
			},
			chartsInfoX:{    //社区
				color:['#41BDBD'],
				tooltip : {
					trigger: 'item',
					formatter: function(e){
						return '人数:'+e.value+ '<br>'+'风险因素:'+e.name 
					}
				},
				legend: {
				},
				xAxis: {
					type: 'category',
					name:'风险因素',
					nameLocation: 'end',
					position:'bottom',
					nameGap:'30',
					data: [],

				},
				grid: {
					left: '3%',
					right: '8%',
					bottom: '10%',
					containLabel: true
				},
				yAxis: {
					type: 'value',
					name:'人数',
				},
				series: [{
					data: [],
					barWidth :39,
					type: 'bar'
				}]
			},
			chartsInfoY:{    //社区
				color:['#41BDBD'],
				tooltip : {
					trigger: 'item',
					formatter: function(e){
						return '人数:'+e.value+ '<br>'+'风险因素:'+e.name 
					}
				},
				legend: {
				},
				xAxis: {
					type: 'category',
					name:'风险因素',
					nameLocation: 'end',
					position:'bottom',
					nameGap:'30',
					data: [],

				},
				grid: {
					left: '3%',
					right: '8%',
					bottom: '10%',
					containLabel: true
				},
				yAxis: {
					type: 'value',
					name:'人数',
				},
				series: [{
					data: [],
					barWidth :39,
					type: 'bar'
				}]
			},
		}
	},
	methods:{
		changeType(val){
            let that=this;
			that.GetIndexDate()
        },
		GetIndexDate:function(){
			let that=this;
			that.service({
				url:'/Statistic/SatiticHealthConditionTwo',
				method:'get',
				params:{
					testType:that.testType
				}
			}).then(response=>{
				console.log(response)
				let arrForm=response.dtData;
				let arrName1=[];let arrData1=[];let arrName2=[];let arrData2=[];let arrName3=[];let arrData3=[];
				arrForm.dt1.map((item,index)=>{
					arrName1.push(index+1)
					arrData1.push({
						value:item.UserCount,
						name:item.ItemName
					})
				})
				arrForm.dt2.map((item,index)=>{
					arrName2.push(index+1)
					arrData2.push({
						value:item.UserCount,
						name:item.ItemName
					})
				})
				arrForm.dt3.map((item,index)=>{
					arrName3.push(index+1)
					arrData3.push({
						value:item.UserCount,
						name:item.ItemName
					})
				})
				that.chartsInfo1.xAxis.data=arrName1;
				that.chartsInfo1.series[0].data=arrData1;
				that.chartsInfoX.xAxis.data=arrName2;
				that.chartsInfoX.series[0].data=arrData2;
				that.chartsInfoY.xAxis.data=arrName3;
				that.chartsInfoY.series[0].data=arrData3;
			}).catch(data=>{

			})
		},
	},
	mounted:function(){
		let that=this;
		that.GetIndexDate()
	},
	created(){

	}
}
</script>
<style scoped lang="scss">
	.index-home{
	header{
		padding:20px;
	}
	.div-echarts{
		width:100%;
	ul{
		li{	
			display: inline-block;
			width: 30%;
			text-align: center;
		}
	}
	}
	.div-table{
		padding:20px;
	.p1{
		padding-left: 0px;
		color: #333;
		margin-bottom:15px;
	span{
		cursor: pointer;
		color: #0066FF;
		padding-left: 20px;
	}
	}
	}
	}
	.positionDiv{
		position: absolute;
		top: 100%;
		left:45%;
	ul{
	li{
		float: left;
		width: 50px;
		border:1px solid #ccc;
		margin:0 1px;
		text-align: center;
		border-radius:6px;
		padding:3px 0px;
		cursor: pointer;
	span{
	}
	}
	.active{
		background: #0099FF;
		color: #fff;
	}
	}
	}
	.div-echarts{
		width: 100%;
	}
</style>